<template>
    <div class="view">
        <nav-bar title="聊天" @clickLeft="back">
            <div class="back" slot="left">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="chat-container" @click="hideToolsBar" :class="(showGiftTool||showEmotionTool||showMicrophoneTool?'chat-container-up':'')">
            <cube-scroll class="chat-container-scroll" ref="chatContainerScroll" :data="chatListArray">
                <div v-for="(item,key) in chatDetailListObject" :key="key" :data-msg-id="key">
                    <chat-box :type="item.type" :text="item.text | decodeHtml" :isSelf='item.isSelf' :faceUrl="item.avatar">
                        <div class="msg-gift-content" slot="content" v-if="item.type === 101">
                            <div class="msg-gift-picture">
                                <img :src="item.text.image.file_path">
                            </div>
                            <div class="msg-gift-text animated infinite pulse slow" v-if="!item.isSelf">{{chatTargetInfo.nickName}}送你一个<span>【{{item.text.name}}】</span>,送个礼物感谢TA吧</div>
                            <div class="msg-gift-text animated infinite pulse slow" v-else>你送给 {{chatTargetInfo.nickName}} 一个<span>【{{item.text.name}}】</span></div>
                        </div>
                        <div class="msg-status" slot="status">
                            <cube-loading :size="20" v-if="item.abnormal === 1"></cube-loading>
                        </div>
                    </chat-box>
                </div>
                <!--{{mediaStatus}},{{audioSrc}}-->
                <!--{{recordMove}}-->
                <!--                <chat-box text="哈哈哈哈哈哈哈哈"></chat-box>-->
                <!--                <chat-box :isSelf='isSelf' text="哈哈哈哈哈哈哈哈"></chat-box>-->
                <!--                <chat-box :type="2" text="http://img2.imgtn.bdimg.com/it/u=975107029,1847959825&fm=26&gp=0.jpg"></chat-box>-->
                <!--                <chat-box :type="2" text="http://img4.imgtn.bdimg.com/it/u=3803568885,3549428435&fm=11&gp=0.jpg"></chat-box>-->
                <!--                <chat-box :isSelf='isSelf' :type="3"></chat-box>-->
                <!--                <chat-box :type="4" mapName="[当前位置]" mapPosition="福建省厦门市海沧区泰地海西A座" tiledSrc="https://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=2&style=7&x=3391&y=1759&z=12&scl=2&ltype=3"></chat-box>-->

                <!--                <chat-box :type="2" :text="tilesSrc" v-if="tilesSrc!==''"></chat-box>-->
                <div class="msg-end" id="msgEnd"></div>
            </cube-scroll>

        </div>
        <div class="chat-tools" :class="(showEmotionTool||showMicrophoneTool?'chat-tools-unfold':'')">
            <div class="chat-tools-input">
                <form action="" @submit.prevent="onSubmit">
                    <input ref="chatInput" @focus="chatInputFocus" @blur="chatInputBlur" type="text" class="chat-tools-input-wrap" v-model="chatText">
                </form>
            </div>
            <div class="chat-tools-other">
                <div class="chat-tools-other-item" v-if="mediaStatus" :class="{'chat-tools-other-item-active animated rubberBand':showMicrophoneTool}">
                    <i class="iconfont icon-yuyin" @click="showMicrophone"></i>
                </div>
                <div class="chat-tools-other-item">
                    <i class="iconfont icon-tupian">
                        <input type="file" accept="image/*" class="input-choose-picture" @change='chooseImageFiles'></input>
                    </i>
                </div>
                <div class="chat-tools-other-item" :class="{'chat-tools-other-item-active animated rubberBand':showEmotionTool}">
                    <i class="iconfont icon-biaoqing" @click="showEmotion"></i>
                </div>
                <div class="chat-tools-other-item" :class="{'chat-tools-other-item-active animated rubberBand':showGiftTool}">
                    <i class="iconfont icon-gift" @click="showGift"></i>
                </div>
                <div class="chat-tools-other-item">
                    <i class="iconfont icon-weizhi" @click="showLocation"></i>
                </div>
            </div>
            <div class="chat-tool-box">
                <div class="chat-micro-tool chat-fixed-tool" :style="'z-index:'+toolLevelList[0]">
                    <div class="chat-micro-tip" v-html="recordStatusText"></div>
                    <div class="chat-micro-icon" :class="{'animated pulse':recordStatus != 0}">
                        <i class="iconfont icon-yuyin"></i>
                    </div>
                    <!--<div class="chat-micro-fee">-->
                    <!--成为vip最长可以发送30s语音-->
                    <!--</div>-->
                </div>
                <div class="chat-emoji-tool chat-fixed-tool" :style="'z-index:'+toolLevelList[2]">
                    <cube-scroll>
                        <emoji-picker ref="emojiPicker" @pickEmotion="selectEmotion"></emoji-picker>
                    </cube-scroll>
                </div>
            </div>
            <div class="picker-gift" :class="{'picker-gift-show':showGiftTool}">
                <div class="picker-gift-head">
                    选择礼物赠送
                </div>
                <div class="picker-gift-wrap">
                    <div class="picker-gift-box">
                        <div class="gift-item" v-for="(gift) in giftList" :key="gift.id" @click="selectGift(gift.id)" :class="{'gift-item-selected':gift.id === giftSelectId}">
                            <img class="gift-picture" :src="gift.image.file_path">
                            <div class="gift-name">{{gift.name}}</div>
                            <div class="gift-price iconfont icon-yuanbao">{{gift.price}}</div>
                        </div>
                    </div>
                </div>
                <div class="picker-gift-action">
                    <div class="picker-gift-balance">
                        <span class="number iconfont icon-yuanbao">{{user.money}}</span>
                        <span class="recharge">充值</span>
                        <span class="cubeic-arrow"></span>
                    </div>
                    <div class="picker-gift-btn" @click="giveGift" :class="{'picker-gift-btn-active':giftSelectId>=0}">立即赠送</div>
                </div>
            </div>
        </div>
        <a-play v-if="audioSrc" :music="audio" ref="audioPlayer" style="display: none"></a-play>
        <div class="chat-micro-mark" v-if="showMicrophoneTool" :class="{'chat-micro-mark-active':recordStart}" v-finger:press-move="moveMicro" v-finger:touch-start="startMicro"
             v-finger:touch-end="endMicro">
            <div class="chat-micro-mark-translucence"></div>
            <div class="chat-micro-action-btn" ref="audioDel" :class="{'chat-micro-action-current':recordInDel}">
                <i class="iconfont icon-dustbin_icon"></i>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import NavBar from "@/components/aui/NavBar.vue";
    import EmojiPicker from "@/components/aui/EmojiPicker.vue";
    import ChatBox from "@/components/aui/ChatBox.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import ChatMessageEntity from "@/entity/ChatMessageEntity";

    import CommonUnit from "@/unit/CommonUnit";
    import {InterfacePosition} from "@/interface/InterfacePosition";
    import {clearPosition} from "@/store/dispatches";
    import {InterfaceSocket} from "@/interface/InterfaceSocket";


    @Component({
        components: {
            NavBar, EmojiPicker, ChatBox
        },
    })
    export default class ChatDetail extends Scene {

        private chatText: any = "";
        private showEmotionTool: boolean = false;
        private showMicrophoneTool: boolean = false;
        private showGiftTool: boolean = false;
        private toolLevelList: number[] = [10, 1, 1, 1, 1];
        private mediaStatus: boolean = false;
        private audioSrc: string = "";
        private recorder: any = "";
        private recorderTimer: number = 0;
        private recorderTime: number = 0;
        private recordTotalTime: number = 15;
        private recordMove: { x: number, y: number } = {x: 0, y: 0};
        private recordInDel: boolean = false;

        private recordHold: boolean = false;
        private recordStart: boolean = false;
        private recordStatus: number = 0;

        private isSelf: boolean = true;

        private tilesSrc: string = "";
        private chatDetailList: any[] = [];

        private chatDetailListObject: any = {};
        private imageFiles: any[] = [];
        private giftList: any[] = [];
        private giftSelectId: number = -1;

        private chatTargetInfo: any = {};
        private page: number = 1;
        private size: number = 10;
        private chatLogList: any[] = [];

        private get chatListArray(): any[] {
            this.chatDetailList.push(this.socket.message);
            const chatMessageEntity = new ChatMessageEntity(this.socket.message, this.chatTargetInfo);
            if (chatMessageEntity.isChatMessage) {
                this.chatDetailListObject = Object.assign(this.chatDetailListObject, chatMessageEntity.chatMessageData);
                if (chatMessageEntity.needSaving) {
                    this.persistenceMessage(chatMessageEntity.identification, chatMessageEntity.saveParameter);
                }
                setTimeout(() => {
                    (<any> this).$refs.chatContainerScroll.scrollToElement(document.getElementById("msgEnd"), 0, false, false);
                }, 100);
            }
            return this.chatDetailList;
        };

        private get toId(): string {
            return String(this.$route.query.toId || "");
        }


        @Action("sendMessage")
        private socketSendMessage!: Function;

        @Watch("recordHold")
        private onChangeRecordHold(n: boolean) {
            console.log(this.recordStatus !== 0 && this.recordHold);
        }

        @Watch("recordStatus")
        private onChangeRecordStatus(n: number) {
            console.log(this.recordStatus !== 0 && this.recordHold);
        }

        @Watch("audioSrc")
        private onChangeAudioSrc(n: string, o: string): any {
            this.$nextTick(() => {
                (<any> this).$refs.audioPlayer.play();
            });
        }

        @State("PositionStore")
        private position!: InterfacePosition;

        private get storePosition(): any {
            let TileLnglatTransform = require("tile-lnglat-transform");
            let TileLnglatTransformGaode = TileLnglatTransform.TileLnglatTransformGaode;
            if (this.position.selected) {
                const tilesXY = TileLnglatTransformGaode.lnglatToTile(this.position.longitude, this.position.latitude, this.position.zoom);
                // const tilesSrc = `http://wprd03.is.autonavi.com/appmaptile?style=7&x=${tilesXY.tileX}&y=${tilesXY.tileY}&z=${this.position.zoom}`;
                const tilesSrc = `https://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=${tilesXY.tileX}&y=${tilesXY.tileY}&z=${this.position.zoom}&scl=2&ltype=3`;
                this.tilesSrc = tilesSrc;
                this.$nextTick(() => {
                    setTimeout(() => {
                        (<any> this).$refs.chatContainerScroll.refresh();
                        (<any> this).$refs.chatContainerScroll.scrollToElement(document.getElementById("msgEnd"), 1);
                    }, 1000);
                });
                clearPosition();

            }
            return this.position;
        }

        //https://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=54658&y=26799&z=16&scl=1&ltype=1
        //https://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=3391&y=1759&z=12&scl=1&ltype=1

        @Watch("storePosition")
        private onChangeStorePosition(n: any): void {
            console.log(n);
        }

        @State("UserStore")
        private user!: InterfaceUser;

        @State("SocketStore")
        private socket!: InterfaceSocket;

        // @Watch('socket')


        // private onChangeTilesSrc(n) {
        //     console.log(111);
        // }

        private getChatTargetInfo(): void {
            Http.get(this.api.getChatObjectInfo, {user_id: this.toId}, {token: this.user.token}).then((res) => {
                this.chatTargetInfo = res.data;
                this.getChatLog(true);
            });

        }


        private get recordStatusText(): string {
            let recordStatusText = "正在录音";
            switch (this.recordStatus) {
                case 0:
                    recordStatusText = "按住说话";
                    break;
                case -200:
                    recordStatusText = "正在准备";
                    break;
                case -199:
                    recordStatusText = "正在处理录音文件";
                    break;
                case -1:
                    recordStatusText = "松开取消";
                    break;
                case 1:
                    let time = Math.floor(this.recorderTime / 2);
                    recordStatusText = "<span style='font-size: 20px;font-weight: 700;color: #555'>0:" + (time < 10 ? ("0" + time) : time) + "</span>";
                    break;
                default:
                    recordStatusText = "正在录音";
            }

            return recordStatusText;
        }

        private get audio(): any {
            return {
                src: this.audioSrc,
            };
        }

        private mounted() {
            this.getChatGiftList();
            this.mediaStatus = !(<any> window).MediaRecorder.notSupported;
            if (this.mediaStatus) {
                (<any> window).navigator.mediaDevices.getUserMedia({audio: true}).then((stream: any) => {
                    const recorderPromise = new (<any> window).MediaRecorder(stream);
                    recorderPromise.stream.getTracks().forEach((i: any) => i.stop());
                }).catch((e: any) => {
                    this.mediaStatus = false;
                });
            }
            this.$nextTick(() => {
                this.getChatTargetInfo();
            });
        }

        private getChatGiftList() {
            Http.get(this.api.getGiftList, {}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.giftList = res.data;
                }
            });
        }

        private beforeDestroy() {
            if (this.recorder) {
                this.recorder.stop();
            }

        }

        private back(): void {
            this.navigateBack();
        }

        private chatInputBlur(): void {
            CommonUnit.windowSizeRecover();
        }

        private chatInputFocus(): void {
            this.showEmotionTool = false;
        }

        private onSubmit(): void {
            (<any> this).$refs.chatInput.blur();
            const emotionList = (<any> this).$refs.emojiPicker.emotionList;
            for (let i in emotionList) {
                this.chatText = this.chatText.replace(new RegExp(`#${emotionList[i]}`, "gi"), `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${i}.gif" align="middle"/>`);
            }
            this.socketSendMessage(JSON.stringify({type: "say", content: String(this.chatText), token: this.user.token, toid: this.toId}));
            this.chatText = "";
        }

        private showMicrophone(): void {
            this.hideToolsBar(1);
        }

        private showEmotion(): void {
            this.hideToolsBar(3);
        }

        private showGift(): void {
            this.hideToolsBar(4);
        }

        private showLocation(): void {
            this.hideToolsBar();
            this.navigateTo({
                name: "locationInformation"
            });
        }


        private hideToolsBar(n: number = 0): void {
            (<any> this).$refs.chatInput.blur();
            if (n > 0) {
                this.toolLevelList = [1, 1, 1, 1, 1];
                this.toolLevelList[n - 1] = 10;
            }
            switch (n) {
                case 1:
                    this.showMicrophoneTool = !this.showMicrophoneTool;
                    this.showEmotionTool = false;
                    this.showGiftTool = false;
                    break;
                case 3:
                    this.showEmotionTool = !this.showEmotionTool;
                    this.showMicrophoneTool = false;
                    this.showGiftTool = false;
                    break;
                case 4:
                    this.showGiftTool = !this.showGiftTool;
                    this.showMicrophoneTool = false;
                    this.showEmotionTool = false;
                    break;
                default:
                    this.showGiftTool = false;
                    this.showMicrophoneTool = false;
                    this.showEmotionTool = false;

            }
        }

        private selectEmotion(emotion: string): void {
            const chatTextArray: string[] = this.chatText.split("");
            const selectionStart: number = (<any> this).$refs.chatInput.selectionStart;
            const selectionEnd: number = (<any> this).$refs.chatInput.selectionEnd;
            if (selectionStart === selectionEnd) {
                chatTextArray.splice(selectionStart, 0, emotion);
            } else {
                chatTextArray.splice(selectionStart, selectionEnd - selectionStart, emotion);
            }
            // (<any> this).$refs.chatInput.selectionStart = chatTextArray.length;
            // (<any> this).$refs.chatInput.selectionEnd = chatTextArray.length;
            this.chatText = chatTextArray.join("");

        }

        private startMicro(evt: any) {
            if (!this.recordHold && this.recordStatus === 0 && !this.recordStart) {
                this.recordStatus = -200;
                this.recordHold = true;
                this.recordStart = true;
                this.recorderTime = 0;
                this.recordMove.x = evt.changedTouches[0].clientX;
                this.recordMove.y = evt.changedTouches[0].clientY;
                const self: any = this;
                (<any> window).navigator.mediaDevices.getUserMedia({audio: true}).then((stream: any) => {
                    this.recorder = new (<any> window).MediaRecorder(stream);
                    this.recorder.addEventListener("dataavailable", (e: any) => {
                        this.recordStatus = -199;
                        this.recordStart = false;
                        clearInterval(this.recorderTimer);
                        if (!this.recordInDel) {
                            if (this.recorderTime <= 3) {
                                (<any> this).$createToast({
                                    time: 2000,
                                    type: "warn",
                                    txt: "语音时间过短!"
                                }).show();
                            } else {
                                this.audioSrc = window.URL.createObjectURL(e.data);
                                const reader = new FileReader();
                                reader.onload = function(e) {
                                    const base64String: any = (<any> e).target.result;
                                    // console.log(base64String);
                                    self.recordStatus = 0;
                                };
                                reader.readAsDataURL(e.data);
                            }
                        }
                        this.recorder.stream.getTracks().forEach((i: any) => i.stop());
                        this.recordStatus = 0;
                    });

                    // Start recording
                    this.recorder.start();


                    this.recordStatus = 1;
                    this.recorderTimer = setInterval(() => {
                        this.recorderTime += 1;
                        if (this.recorderTime >= this.recordTotalTime * 2) {
                            clearInterval(this.recorderTimer);
                            if (this.recorder) {
                                this.recorder.stop();
                            }
                        }
                    }, 500);
                });
            }

        }

        private endMicro() {
            this.recordHold = false;
            this.recordStart = false;
            clearInterval(this.recorderTimer);
            if (this.recorder) {
                this.recorder.stop();
            }
        }

        private moveMicro(evt: any) {
            if (this.recordStart) {
                console.log("@@" + this.recordHold);
                const audioDelDom = (<any> this).$refs.audioDel;
                const radioDelArea: { x1: number, y1: number, x2: number, y2: number } = {
                    x1: audioDelDom.offsetLeft,
                    y1: audioDelDom.offsetTop,
                    x2: audioDelDom.offsetLeft + audioDelDom.offsetWidth,
                    y2: audioDelDom.offsetTop + audioDelDom.offsetHeight
                };
                this.recordMove.x += evt.deltaX;
                this.recordMove.y += evt.deltaY;
                const circleCenter: { x: number, y: number } = {x: 0, y: 0};
                circleCenter.x = (radioDelArea.x2 + radioDelArea.x1) / 2;
                circleCenter.y = (radioDelArea.y2 + radioDelArea.y1) / 2;
                this.recordInDel = CommonUnit.pointInsideCircle([this.recordMove.x, this.recordMove.y], [circleCenter.x, circleCenter.y], Math.abs(radioDelArea.x2 - radioDelArea.x1) / 2);
                this.recordStatus = this.recordInDel ? -1 : 1;
            }
        }

        // private chatDetailItemDataExtractKey(item: any): any {
        //     const obj: any = {};
        //     obj[item.identification] = item;
        //     return obj;
        // }

        private async persistenceMessage(msgId: string, msgData: any): Promise<any> {
            try {
                const result = await Http.post(this.api.saveChatMessage, {...msgData}, {token: this.user.token});
                if (result.code) {
                    this.$set(this.chatDetailListObject[msgId], "abnormal", 0);
                } else {
                    this.$set(this.chatDetailListObject[msgId], "abnormal", -1);
                }
            } catch (e) {
                this.$set(this.chatDetailListObject[msgId], "abnormal", -1);
            }
            this.$nextTick(() => {
                this.socketSendMessage(JSON.stringify({type: "pong", timestamp: new Date().getTime()}));
            });
        }

        private async chooseImageFiles(evt: any): Promise<any> {
            const file = evt.target.files[0];
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "正在上传...",
                mask: true
            }).show();
            try {
                const uploadResult = await Http.upload(this.api.imageUpload, {type: "chat", iFile: file}, {token: this.user.token});
                if (uploadResult.code === 1) {
                    toast.hide();
                    this.socketSendMessage(JSON.stringify({type: "say_img", content: String(uploadResult.data.id), token: this.user.token, toid: this.toId}));

                } else {
                    toast = (<any> this).$createToast({
                        time: 2000,
                        txt: uploadResult.msg,
                        mask: true,
                        type: "error"
                    }).show();
                }
            } catch (e) {
                toast = (<any> this).$createToast({
                    time: 2000,
                    txt: "网络出错",
                    mask: true,
                    type: "error"
                }).show();
            }
        }

        private selectGift(id: number) {
            this.giftSelectId = id;
        }

        private async giveGift() {
            if (this.giftSelectId >= 0) {
                let toast = (<any> this).$createToast({
                    time: 0,
                    txt: "正在赠送礼物中...",
                    mask: true
                }).show();
                try {
                    const result = await Http.post(this.api.placeGiftOrder, {id: this.giftSelectId, user_id: this.toId}, {token: this.user.token});
                    this.hideToolsBar();
                    if (result.code === 1) {
                        this.authentication();
                        toast = (<any> this).$createToast({
                            time: 500,
                            txt: "赠送礼物成功",
                            type: "correct",
                            mask: true
                        }).show();
                    } else {
                        this.globalSingleResultToast(result);
                    }
                } catch (e) {
                    toast = (<any> this).$createToast({
                        time: 2000,
                        txt: "赠送失败，请稍后重试。。。",
                        mask: true,
                        type: "error"
                    }).show();
                }
            }
        }

        private getChatLog(toBottom: boolean): void {
            Http.post(this.api.getChatLoad, {toid: this.toId, page: this.page, size: this.size}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    const dataList = res.data.data.reverse();
                    this.chatDetailList.push(...dataList);
                    for (let i in dataList) {
                        const chatMessageEntity = this.logToItem(res.data.data[i]);
                        this.chatDetailListObject = Object.assign(this.chatDetailListObject, chatMessageEntity);
                    }
                    if (toBottom) {
                        this.$nextTick(() => {
                            setTimeout(() => {
                                (<any> this).$refs.chatContainerScroll.scrollToElement(document.getElementById("msgEnd"), 0, false, false);
                            }, 100);
                        });
                    }
                }
            });
            // this.chatLogList
        }

        private logToItem(data: any): any {
            const log: any = {};
            log[data.identification] = {
                abnormal: 0,
                avatar: data.fromid === this.user.userId ? this.user.avatar.filePath : this.chatTargetInfo.avatar.file_path,
                fromId: data.fromid,
                identification: data.identification,
                isSelf: data.fromid === this.user.userId,
                text: data.content,
                timeStamp: data.time,
                toId: data.toid,
                type: data.type
            };
            return log;

        }

    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background $theme-page-chat-background-color;
        overflow hidden;

    .chat-container
        width 100vw;
        height calc(100vh - (102px + var(--safe-area-inset-bottom)));
        padding calc(44px + var(--safe-area-inset-top)) 0 0;
        overflow hidden;
        transition transform .3s ease-in-out;
        position relative;

        .msg-end
            height 4px;
            display block;

    .chat-container-up
        transform translateY(-210px)

    .chat-tools
        background #eff2fb;
        height 102px;
        /*overflow hidden;*/
        bottom 0;
        width 100vw;
        left 0;
        padding-bottom var(--safe-area-inset-bottom);
        position fixed;
        transition height .3s ease-in-out;

        .chat-tools-input
            height 55px;
            padding 10px 10px 0 10px;

            input
                width 100%;
                height 44px;
                box-sizing border-box;
                padding 5px 15px;
                word-break break-all;

            .chat-tools-input-wrap
                border-radius 55px;
                overflow hidden;

                &::after
                    display none

        .chat-tools-other
            height 47px;
            display flex;
            justify-content center;

            .chat-tools-other-item
                flex 1;
                font-size 23px
                display flex;
                align-items center;
                justify-content center;
                color #989db1;

                i
                    position relative;
                    font-size 23px;
                    overflow hidden;

    .chat-tool-box
        width 100vw;
        height 210px;
        position relative;

    .chat-emoji-tool, .chat-micro-tool
        height 210px;
        background #fff

    .chat-fixed-tool
        position absolute;
        top 0
        left 0;
        right 0;

    .chat-tools-unfold
        height 312px;

    .chat-tools-other-item-active
        i
            color $theme-common-color;

    .chat-micro-tip
        height 55px;
        line-height 55px;
        text-align center;
        font-size 14px;
        color #808080;

    .chat-micro-icon
        height 110px;
        width 110px;
        margin auto;
        background $theme-common-color;
        border-radius 110px;
        display flex;
        justify-content center;
        align-items center;
        position relative;
        overflow hidden;

        i.iconfont
            font-size 44px;
            color #fff;


    .chat-micro-fee
        height 45px;
        color #999;
        font-size 12px;
        line-height 45px;
        text-align center;


    .chat-micro-mark
        position absolute;
        height 110px;
        width 110px;
        bottom calc(210px - 55px - 110px);
        left 50%;
        margin-left -55px;
        z-index 200;
        border-radius 110px;
        overflow hidden;

    .chat-micro-mark-active
        position absolute;
        height 100vh;
        width 100vw;
        top 0;
        left 0;
        margin 0 !important;
        z-index 200;
        border-radius 0 !important;

        .chat-micro-mark-translucence
            height calc(100vh - 210px);
            background rgba(0, 0, 0, .3);

        .chat-micro-action-btn
            width 60px;
            height 60px;
            background #f2f3f7;
            border-radius 60px;
            display flex;
            align-items center;
            justify-content center;
            color #888b9e;
            position absolute;
            right 30px;
            bottom calc(210px - 55px - 30px - 55px);

            i.iconfont
                font-size 24px;
                font-weight 700;

        .chat-micro-action-current
            background #d9dadc;

    .picker-gift-show
        transform translateY(0) !important;

    .picker-gift
        height 312px;
        background #fff;
        position absolute;
        width 100vw;
        bottom 0;
        left 0;
        z-index 200 !important;
        transform translateY(100%);
        transition all .3s ease-in-out;

        .picker-gift-head
            height 45px;
            display flex;
            justify-content center;
            align-items center;
            color $theme-common-color;

        .picker-gift-wrap
            height 204px;

            .picker-gift-box
                width 100vw;
                height 204px;
                overflow hidden;
                position relative;
                display flex;
                flex-wrap wrap;

                .gift-item
                    width calc(25vw - 10px);
                    height 92px;
                    position relative;
                    display flex;
                    justify-content space-between;
                    align-items center;
                    margin 5px;
                    padding 7px;
                    box-sizing border-box
                    flex-direction column;
                    border-radius 5px;


                    img.gift-picture
                        height 45px;
                        width 45px;
                        display block;

                    .gift-name
                        color #878787;
                        margin-top 2px
                        font-size 12px;

                    .gift-price
                        color #c1c1c1;
                        font-size 12px;
                        line-height 20px;

                        &::before
                            padding-right 2px;
                            font-size 11px;

                .gift-item-selected
                    border 1px solid $theme-advancing-color;
                    padding 6px !important;


        .picker-gift-action
            height 63px;
            padding 0 10px;
            display flex;
            justify-content space-between;
            align-items center;

            .number
                padding-right 5px;

                &::before
                    font-size 14px;
                    padding-right 4px;
                    color #aaa;

            .recharge
                padding-right 3px;

            .picker-gift-balance
                color #777777;

            .picker-gift-btn
                background $theme-thin-color;
                height 35px;
                line-height 35px;
                width 120px;
                border-radius 35px;
                color #fff;
                text-align center;
                transition background .2s ease-in-out;

            .picker-gift-btn-active
                background $theme-common-color

    .msg-status
        height 30px;
        display flex;
        align-items flex-end;

    .input-choose-picture
        font-size 0;
        position absolute;
        width 25px;
        height 25px;
        left 0;
        top 0;
        z-index 21;
        opacity 0;

    .msg-gift-content
        width 50vw;

        .msg-gift-picture
            width 50vw;
            position relative;

            img
                width 100%;
                height auto

        .msg-gift-text
            position relative;
            width 50vw;
            font-size 13px;
            background-image -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
            color transparent;
            background-clip text;

            span
                padding 0 2px;
                font-weight 700;
</style>
